<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>IT技术博客文章</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<script>
			//异步加载查询结果
			function searchBlog(btype_id) {
				var url = 'searchBlog?btype_id='+btype_id;
				$.get(url, function (data) {
					$("#blog_searchres").html(data);
				})
			}
		</script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<link rel="stylesheet" type="text/css" href="css/flat-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link rel="stylesheet" type="text/css" href="css/blogMain.css" />
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-lg navbar-expand-lg" role="navigation">
			<a class="navbar-brand" href="indexMain.html">
				<img src="images/ITx32.png" style="width: auto;height: 25px;">
			</a>
			<a class="navbar-brand" style="padding-left: 0;" href="indexMain.html">IT技术课程网站</a>
			<div class="collapse navbar-collapse" id="navbar-collapse-01">
				<ul class="nav navbar-nav mr-auto">
					<li><a href="indexMain.html">首页</a></li>
					<li><a href="videoMain.html">视频课程</a></li>
					<li class="active"><a href="blogMain.html">博客文章</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right mr-auto">
					<li><a th:text="${session.Account.username}" href="userInfo.html" id="username-menu">用户名</a></li>
				</ul>
				<form class="navbar-form form-inline my-2 my-lg-0" action="searchInputBlog" role="search" style="margin: 0px;">
					<div class="form-group" style="margin-left: 20px;">
						<div class="input-group">
							<input class="form-control" id="navbarInput-01" name="searchText" style="width: 250px;" type="search" placeholder="输入搜索博客" required>
							<span class="input-group-btn">
								<button type="submit" class="btn"><span class="fui-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div><!-- /.navbar-collapse -->
		</nav><!-- /navbar -->

		<!-- container -->
		<div class="container">

			<!-- 视频分类开始 -->
			<div class="jumbotron navbar-inverse" style="color: #fff;">
				<div class="row">
					<div class="leftMenu col-lg-3 col-md-3 col-sm-3">
						<div class="meun-item meun-item-active" href="#qianduan" aria-controls="qianduan" role="tab" data-toggle="tab">前端开发</div>
						<div class="meun-item" href="#houduan" aria-controls="houduan" role="tab" data-toggle="tab">后端开发</div>
						<div class="meun-item" href="#shujuku" aria-controls="shujuku" role="tab" data-toggle="tab">数据库技术</div>
						<div class="meun-item" href="#wangluo" aria-controls="wangluo" role="tab" data-toggle="tab">网络运维</div>
					</div>
					<div class="rightMenu col-lg-9 col-md-9 col-sm-9">
						<!-- Tab panes -->
						<ul class="tab-content">
							<li class="tab-pane active" id="qianduan" role="tabpanel">
								<div class="row">
									<div th:each="qianduanList:${qianduanList}" th:onclick="'searchBlog('+${qianduanList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${qianduanList.btypename}" >HTML5</a>
									</div>
								</div>
							</li>
							<li class="tab-pane" id="houduan" role="tabpanel">
								<div class="row">
									<div th:each="houduanList:${houduanList}" th:onclick="'searchBlog('+${houduanList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${houduanList.btypename}">HTML5</a>
									</div>
								</div>
							</li>
							<li class="tab-pane" id="shujuku" role="tabpanel">
								<div class="row">
									<div th:each="shujukuList:${shujukuList}" th:onclick="'searchBlog('+${shujukuList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${shujukuList.btypename}">HTML5</a>
									</div>
								</div>
							</li>
							<li class="tab-pane" id="wangluo" role="tabpanel">
								<div class="row">
									<div th:each="wangluoList:${wangluoList}" th:onclick="'searchBlog('+${wangluoList.id}+')'" class="type-item col-md-3 col-sm-4">
										<a th:text="${wangluoList.btypename}">HTML5</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 视频分类结束 -->
			<!-- 最新博客开始 -->
			<div th:fragment="blog_searchres" id="blog_searchres">
				<h4 th:text="${blogType.btypename}">最新博客</h4>
				<hr />
				<div class="row">
					<div th:if="${#lists.isEmpty(blogList)}" class="col-sm-8 col-md-6">
						<h4>没有找到相关内容</h4>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-8 col-md-8 col-lg-8">
						<div class="tile blog-item" th:each="blogList:${blogList}">
							<a th:href="@{blogDetail?b_id={id}(id=${blogList.id})}">
								<h5 th:text="${blogList.btitle}" class="blog-title">博客标题</h5>
								<p class="blog-desc" th:text="${blogList.bdesc}">博客简介</p>
								<hr style="border-color: #aaa;">
								<span th:text="${blogList.username}">作者</span>
								<span th:text="${#dates.format(blogList.btime, 'yyyy-MM-dd')}" style="margin-left: 10px">发布时间</span>
								<span style="margin-left: 10px">博客分类:</span>
								<span th:text="${blogList.btypename}">分类名称</span>
							</a>
						</div>
					</div>
					<div class="col-sm-4 col-md-4 col-lg-4">
						<div class="ads-div">
							<h5>技术成就未来</h5>
							<hr style="border-color: rgba(0,0,0,.3)">
							<ul>
								<li>不积跬步，无以至千里</li>
								<li>不积小流，无以成江海</li>
								<li>不愤不启不悱不发</li>
								<li>欲得真学问，须下苦工夫</li>
								<li>学习不能好高骛远，须一步一个脚印</li>
								<li>进步不能一步登天，须一步一级台阶</li>
								<li>路漫漫其修道远，吾将上下而求索</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 最新博客结束 -->
			

		</div> <!-- /container -->
		<!-- 底部信息 -->
		<footer class="footer">
			<div class="footer-title">
				About the website
			</div>
			<hr >
			<div class="footer-content">
				<ul>
					<li><span>@Author: </span><span><a href="#fakelink">renexton@163.com</a></span></li>
					<li><span>Copyright &copy;2020 </span><span><a href="#fakelink">WSS-Studio</a></span></li>
				</ul>
			</div>
		</footer>


		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/flat-ui.js"></script>
		<script src="js/application.js"></script>
		<script>
			$(function() {
				$(".meun-item").click(function() {
					$(".meun-item").removeClass("meun-item-active");
					$(this).addClass("meun-item-active");
				});

			})
		</script>

	</body>

</html>
